<template>
  <div class="main-line" ref="lineRef"></div>
</template>

<script lang="ts">
export default {
  name: "lineChart",
};
</script>

<script lang="ts" setup>
import * as echarts from "echarts";
import { watch, ref } from "vue";
const lineRef = ref();
const props = defineProps<{
  orderTrend: number[];
  orderTrendAxis: string[];
}>();
// 子组件先于父组件挂载完成
// 所以onMounted无法实现
// 使用监听属性来监听props.orderTrend是否改变
watch(
  () => props.orderTrend,
  () => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(lineRef.value);
    // 绘制图表
    myChart.setOption({
      xAxis: {
        data: props.orderTrendAxis,
        // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
        boundaryGap: false,
      },
      yAxis: {
        show: false,
      },
      grid: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
      },
      series: {
        name: "今日订单",
        type: "line",
        data: props.orderTrend,
        itemStyle: {
          opacity: 0,
        },
        smooth: true,
        areaStyle: {
          color: "#a64ca6",
          opacity: 1,
        },
        lineStyle: {
          color: "#a64ca6",
        },
      },
    });
  }
);
</script>

<style scoped>
.main-line {
  width: 100%;
  height: 100%;
}
</style>
